<script setup>
import { computed, reactive } from 'vue';

const state = reactive({
  list: [
    { id: 1, name: '吃饭', flag: true },
    { id: 2, name: '睡觉', flag: false },
    { id: 3, name: '打豆豆', flag: true },
  ],
  todoName: '',
  tabs: ['all', 'active', 'completed'],
  active: 'all'
})
// !删除
const deleteItem = (id) => {
  /* const idx = state.list.findIndex(item => item.id === id)
  state.list.splice(idx, 1) */
  state.list = state.list.filter(item => item.id !== id)
}

// !#1 准备变量，收集数据
// !#2 敲回车把数据加工成对象怼到 state.list
const addItem = () => {
  const o = {
    id: Date.now(),
    name: state.todoName,
    flag: false
  }
  state.list.unshift(o)

  state.todoName = ''
}

// 剩余数量
const leftCounts = computed(() => state.list.filter(item => !item.flag).length)
// 是否显示底部栏
const isShowFooter = computed(() => state.list.length > 0)
// 是否显示清除已完成的按钮
const isShowClear = computed(() => state.list.filter(item => item.flag).length > 0)

// 清除已完成
const clearCompleted = () => {
  state.list = state.list.filter(item => !item.flag)
}

// 根据单选确定全选的状态
/* const isAll = computed(() => {
  return state.list.every(item => item.flag)
}) */
const isAll = computed({
  get() {
    return state.list.every(item => item.flag)
  },
  set(changedStatus) {
    // 把变化完毕之后的全选状态作用与每一个单选
    state.list.forEach(item => item.flag = changedStatus)
  }
})

// 根据 state.active 筛选出要渲染的数据，renderList
const renderList = computed(() => {
  if(state.active === 'active')  {
    return state.list.filter(item => !item.flag)
  }
  if(state.active === 'completed')  {
    return state.list.filter(item => item.flag)
  }
  return state.list
})
</script>

<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input class="new-todo" placeholder="What needs to be done?" autofocus v-model="state.todoName" @keyup.enter="addItem" />
    </header>

    <section class="main">
      <!-- //!全选的按钮 -->
      <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll" />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <li :class="{
          // 右边为 true 就使用左边的 class
          completed: item.flag
        }" v-for="item in renderList" :key="item.id">
          <div class="view">
            <input class="toggle" type="checkbox" v-model="item.flag" />
            <label>{{ item.name }}</label>
            <button class="destroy" @click="deleteItem(item.id)"></button>
          </div>
          <input class="edit" value="Create a TodoMVC template" />
        </li>
      </ul>
    </section>

    <footer class="footer" v-if="isShowFooter">
      <span class="todo-count"><strong>{{leftCounts}}</strong> item left</span>
      <ul class="filters">
        <li v-for="item in state.tabs" :key="item" @click="state.active = item">
          <a :class="{
            selected: state.active === item
          }" href="#/">{{item}}</a>
        </li>
      </ul>
      <button class="clear-completed" v-if="isShowClear" @click="clearCompleted">Clear completed</button>
    </footer>
  </section>
</template>